<template>
  <div class="form">
    <div class="flex middle ">
      <chart-card
        class="mb20 ml10 cell-main mr10"
        title="总销售额"
        total="￥126,560"
      >
        <div class="l">日同比: 111</div>
        <div class="l">月同比: 211</div>
        <div slot="footer">日均销售额<span>￥ 234.56</span></div>
      </chart-card>
      <chart-card
        class="mb20 ml10 cell-main mr10"
        title="总销售额"
        total="￥126,560"
      >
        <form-line :height="50" :chartData="incomes" />
        <div slot="footer">日均销售额<span>￥ 234.56</span></div>
      </chart-card>
      <chart-card
        class="mb20 ml10 cell-main mr10"
        title="总销售额"
        total="￥126,560"
      >
        <form-bar :height="50" :chartData="incomes" />
        <div slot="footer">日均销售额<span>￥ 234.56</span></div>
      </chart-card>
      <chart-card
        class="mb20 ml10 cell-main mr10"
        title="总销售额"
        total="￥126,560"
      >
        <dv-percent-pond
          :config="{ value: 66, localGradient: true }"
          style="width:100%;height:30px;"
        />
        <div slot="footer">日均销售额<span>￥ 234.56</span></div>
      </chart-card>
    </div>
  </div>
</template>

<script>
import chartCard from './components/chartCard'
import formLine from './form/formLine'
import formBar from './form/formBar'
export default {
  data() {
    return {
      incomes: {
        legend: '',
        x: [['2015', '2016', '2017', '2018', '2019', '2020']],
        y: [[555, 896, 1935, 2922, 4508, 5000]]
      }
    }
  },

  components: {
    'chart-card': chartCard,
    'form-line': formLine,
    'form-bar': formBar
  },

  computed: {},

  mounted() {},

  methods: {}
}
</script>
<style lang='scss' scoped>
.form {
  min-height: 100vh;
  background-color: rgb(230, 229, 229);
}
</style>